<template>
  <div class="Chief-Nine" chief-style-set>
    <Title title='节点完成情况' more :MoreUrl='MoreJump(this, "Construction", 1)'></Title>
    <div class="content-h-auto" chief-style-set>
      <div class="left-box content-box">
        <div class="chart"><pie-charts :pChartsOption='ChartsOption1' :isloop='true'></pie-charts></div>
        <div class="content"  v-if='Object.keys(ChartsOption1).length > 0'>{{showDataList[0]['name'] + '：' || ""}}<b>{{showDataList[0].data['计划值']}}</b></div>
        <div class="content"  v-if='Object.keys(ChartsOption1).length > 0'>{{showDataList[0] ? '实际值：' : ''}}<b>{{showDataList[0].data['实际值']}}</b></div>
      </div>
      <div class="right-box content-box" >
        <div class="chart"><pie-charts :pChartsOption='ChartsOption2' :isloop='true'></pie-charts></div>
        <div class="content" v-if='Object.keys(ChartsOption2).length > 0'>{{showDataList[1]['name'] + '：' || ""}}<b>{{showDataList[1].data['计划值']}}</b></div>
        <div class="content" v-if='Object.keys(ChartsOption2).length > 0'>{{showDataList[1] ? '实际值：' : ''}}<b>{{showDataList[1].data['实际值']}}</b></div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "@/components/baseTitle";
import pieCharts from "@/components/portalEcharts/PieEcharts";
import { rptVisPrjNodefinish } from "@/api/portalChief";
import { MoreJump } from "@/util/util";
export default {
  name: "Chief-Nine",
  components: {
    Title, pieCharts
  },
  data () {
    return {
      ChartsOption1: {},
      ChartsOption2: {},
      MoreJump,
      showDataList: [{
        name: "",
        data: {}
      }, {
        name: "",
        data: {}
      }]
    };
  },
  created () {
    rptVisPrjNodefinish(this.$store.state.user.project.projectNo).then(res => {
      this.disposeData(res);
    });
  },
  methods: {
    // eslint-disable-next-line valid-jsdoc
    /**
    * 方法描述描述
    * @param {Object} res 参数作用
    */
    disposeData (res) {
      if (res.status === 200 && res.data.data.length > 0) {
        this.showDataList = res.data.data;
        res.data.data.forEach((item, index) => {
          this[`ChartsOption${index + 1}`] = {
            value: (item.data["完成率"] * 100).toFixed(0),
            color: index < 1 ? "#35C6A9" : "#F86496"
          };
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.Chief-Nine{
}
.content-h-auto{
  .content-box{
    display: flex !important;
    flex-direction: column;
    >div{
      flex:1;
      text-align: center;
    }
    .chart{
      flex: 5;
    }
    .content{
      font-size: 1vw;
      b{
        font-size: 1.5vw;
      }
    }
  }
}
</style>